<template>
    <div class="Logisticslist">
          <div class="title">
         <img src="../assets/images/fanhui.png" @click="fanhui" height="16px" alt="" style="float: left;margin-top: 12px;">
         快递单
       </div>
         <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
        <div class="dangneir" v-for="(item,index) in arr" :key="index"> 
        <div class="title_shangp">
            快递单号:{{item.orderCode}}<img style="float:right" height="13px" src="../assets/images/jiantou.png" alt="">
        </div>
        <div class="neir">
            <div class="l"><img src="../assets/images/物流单.png" alt=""></div>
            <div class="r">
                <p><span>下单时间</span>{{item.createTime}}</p>
                <p><span>收货人</span>{{item.consignee}}</p>
                <p><span>发货人</span>{{item.consignor}}</p>
            </div>
        </div>
        <div class="pj">
            <van-button v-if="item.star" round type="info" color="#ffcc33" @click="chakan(item.id)">查看评价</van-button>
            <van-button v-else round type="info" color="#ffcc33" @click="chakan(item.id)">评价</van-button>
        </div>
        </div>
    </div>
</template>

<script>
import {apistar} from '../requset/api'
export default {
    data () {
        return {
       value:"",
       arr:[]
        }
    },
    created(){
        apistar({
            keyword:"",
            current:'1',
            size:"20"
        }).then(res=>{
           if(res.errCode==0){
            //    console.log(res);
               this.arr=res.data.records
           }
        })
    },
    methods:{
        fanhui(){
            this.$router.back()
        },
        onSearch(){

        },
        chakan(i){
            // console.log(i);
           this.$router.push('wuliupj/'+i) 
        }
    }
}
</script>
 
<style lang = "less" scoped>
.Logisticslist{
 width: 100%;
    min-height:100vh ;
    background: #f5f5f5;
      .title{
        height: 43px;
        width: 100%;
        background: #003399;
        text-align: center;
        line-height: 43px;
        color: #fff ;
        padding-left: 12px;
        box-sizing: border-box;
    }
     .van-search__content,.van-search__content--square{
           border-radius:20px ;
    }
    .van-search__action{
        color: #003399;
    }
    .dangneir{
     background: #fff;
      .title_shangp{
        padding: 18px 13px 18px 20px;
        border-bottom: 1px solid #f1f1f1;
        background: #fff;
        margin-top: 10px;
      }
      .neir{
          padding-top: 16px;
          padding-left: 21px;
          padding-bottom: 28px;
          border-bottom: 1px solid #f5f5f5;
          display: flex;
        .l{
            margin-right:15px;
            img{
                width: 60px;
                height: 60px; 
            }
        }
        .r{
            
            p{ 
                span{
                    color: #ccc;
                    margin-right: 12px;
                }
                font-size: 14px;
                margin: 0;
            }
        }
       
      }
      .pj{
          height: 55px;
          padding-right: 13px;
          box-sizing: border-box;
      }
      .van-button{
        height: 30px;
        line-height: 30px;
        padding: 0px 20px;
        float: right;
        margin-top: 10px;
      }
      
 }
}

</style>